<template>
    <div>
         <!-- 
             在vue3中v-model可以作用在任意一个元素上
             在vue3中一个标签可以使用多个v-model指令 并且可以给v-model定义一个自定义的属性 
             在子组件中可以接收这个自定义属性
          -->
        <!-- <model v-model:content="content" v-model:content2="content2" class="red" @click="modelClick"></model> -->
        <!-- <model ></model> -->
        <model v-model:content="content" v-model:content2="content2" class="red"></model>
    </div>
</template>

<script>
import model from '@/components/vModel/vModel'
import { reactive, toRefs, watch } from 'vue'
export default {
    components: {
        model
    },
    setup() {
        let state = reactive({
            content: '德玛西亚',
            content2: '诺克萨斯'
        })

        watch(() => state, (to) => {
            console.log(to)
        }, {
            deep: true
        })

        // function modelClick() {
        //     // console.log(1)
        //     state.content = "王者荣耀"
        // }

        return {
            ...toRefs(state),
            // modelClick
        }
    }
 }
</script>

<style scoped>
</style>